import React, { ReactNode, useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Layout, Tooltip, Dropdown, Menu, Space } from "antd";
// import { useNavigate } from "react-router-dom";
import type { MenuProps } from "antd";
import {
  FullscreenExitOutlined,
  FullscreenOutlined,
  UserOutlined,
  // MailOutlined,
} from "@ant-design/icons";

import { RootStateI } from "../../types/system";
import styles from "./index.module.less";
import { setUserAction } from "../../store/actions/index";
import { refreshToken } from "../../api/system";
import logo from "../../assets/images/logo.jpeg";

// 业务页面专用，必须登录
interface Element {
  webkitRequestFullscreen?: () => void;
  webkitExitFullscreen?: () => void;
  mozRequestFullScreen?: () => void;
  mozCancelFullScreen?: () => void;
  msRequestFullscreen?: () => void;
  msExitFullscreen?: () => void;
}

const { Header } = Layout;

interface PropsI {
  children?: ReactNode;
}

const AdminHeader: React.FC<PropsI> = (props: PropsI): JSX.Element => {
  // const { children } = props;
  const user = useSelector((state: RootStateI) => state.user);
  const [fullScreen, setFullScreen] = useState<boolean>(false);
  const dispatch = useDispatch();
  // const navigate = useNavigate();

  const items: MenuProps["items"] = [
    {
      key: "/system/profile",
      label: (
        <a rel="noopener noreferrer" href="/system/profile">
          用户信息
        </a>
      ),
    },
    {
      key: "/logout",
      label: (
        <span
          onClick={() => {
            console.log("logout");
            dispatch(setUserAction({ token: "" }));
          }}
        >
          退出登录
        </span>
      ),
    },
  ];

  const menu = (
    <Menu>
      <Menu.Item>1</Menu.Item>
    </Menu>
  );

  // 进入全屏
  const requestFullScreen = useCallback(() => {
    const element: HTMLElement & Element = document.documentElement;
    // 兼容不同浏览器的全屏 API
    const requestMethod =
      element.requestFullscreen ||
      element.webkitRequestFullscreen ||
      element.mozRequestFullScreen ||
      element.msRequestFullscreen;

    if (requestMethod) {
      requestMethod.call(element);
    }
    setFullScreen(true);
  }, []);

  // 退出全屏
  const exitFullScreen = useCallback(() => {
    // 判断各种浏览器，找到正确的方法
    const element: Document & Element = document;
    const exitMethod =
      element.exitFullscreen || // W3C
      element.mozCancelFullScreen || // firefox
      element.webkitExitFullscreen || // Chrome等
      element.msExitFullscreen; // IE11
    if (exitMethod) {
      exitMethod.call(document);
    }
    setFullScreen(false);
  }, []);

  const tokenRefresher = () => {
    const timer = setInterval(() => {
      if (user && user.token) {
        refreshToken().then((res: any) => {
          if (user && user.token && res.data.token !== user.token) {
            dispatch(setUserAction({ token: res.data.token }));
          }
        });
      }
    }, 1000 * 60 * 5); // 每5分钟刷新一次

    return () => clearInterval(timer);
  };

  useEffect(tokenRefresher, [dispatch, user]);

  return (
    <Header className={styles.header} data-testid="admin-header">
      <div className={styles.logo}>
        <a href="/">
          <img src={logo} alt="Logo" style={{ height: "100%" }}></img>
        </a>
      </div>
      <div className={styles.rightDiv}>
        <div className={styles.tools}>
          <Tooltip
            placement="bottom"
            title={fullScreen ? "退出全屏" : "全屏"}
            data-testid="fullscreen-dom"
          >
            {fullScreen ? (
              <FullscreenExitOutlined
                className={styles.icon}
                onClick={exitFullScreen}
              />
            ) : (
              <FullscreenOutlined
                className={styles.icon}
                onClick={requestFullScreen}
              />
            )}
          </Tooltip>
        </div>
        <div className={styles.userInfo}>
          {user && user.token ? (
            // <Dropdown menu={{ items }} placement="topLeft" arrow>
            // 	<div>
            // 		<UserOutlined />
            // 		<span className={styles.roleName}>{user.username}</span>
            // 	</div>
            // </Dropdown>
            // <Dropdown overlay={menu}></Dropdown>
            <span className={styles.roleName}>登录</span>
          ) : (
            <span className={styles.roleName}>登录</span>
          )}
        </div>
      </div>
    </Header>
  );
};

export default AdminHeader;
